<template>
    <div>
        <el-form :model="form">
    <el-form-item label="用户头像" label-width="120px">
     <el-avatar :src="form.userPhotoUrl">
      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
     </el-avatar>
     <el-upload
        class="upload-demo"
        action=""
        :multiple="false"
        :show-file-list="false"
        :http-request="upload"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
     </el-upload>
    </el-form-item>
    <el-form-item label="用户名称" label-width="120px">
      <el-input v-model="form.userName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="真实姓名" label-width="120px">
      <el-input v-model="form.realName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" label-width="120px">
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" label-width="120px">
      <el-input v-model="form.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" label-width="120px"> 
      <el-input v-model="form.password" autocomplete="off" type="password">
      </el-input>
    </el-form-item>
    <el-form-item label="图片识别剩余次数" label-width="150px">
      <el-input v-model="form.photoDistinguishNum" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="权限等级" label-width="120px">
      <!-- <el-input v-model="form.role[0].roleName" autocomplete="off"></el-input> -->
      <el-select v-model="value" placeholder="请选择">
            <el-option
            v-for="item in Role"
            :key="item.value"
            :label="item.roleName"
            :value="item.id">
            </el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateUser()">确 定</el-button>
  </div>
    </div>
</template>

<script>
import { AxiosGet,AxiosPost } from "../../axios";
export default {
    name: 'SettingIndex',

    data() {
        return {
           form: {
             userPhotoUrl:''
           }, 
           dialogFormVisible:false,
           value:'',
           Role:[]
        };
    },

    mounted() {
        this.initData()
    },

    methods: {
            initData(){
                this.form =this.$ls.get("loginUser")
                this.Role = []
                this.value = this.form.role[0].roleName
                AxiosGet('role/selectAll').then(sucess=>{
                    sucess.data.forEach((element,index) => {
                        if(index != 0){
                            this.Role.push(element)
                        }
                    });
                })
            },
            upload(param) {
                console.log(this.form.phone);
                const formData = new FormData()
                formData.append('file', param.file)
                AxiosPost('photo/upload/'+this.form.phone, formData).then(data => {
                    console.log(data)
                    this.form.userPhotoUrl = data.data +"?temp=" + Math.random()
                    this.form =this.$ls.set("loginUser",this.form)
                }).catch(response => {
                    console.log('图片上传失败'+response)
                })
                },
          updateUser(){
            let user = this.form
            this.Role.forEach(item=>{
                if(this.value == item.id){
                    user.role = [item]
                }
            })
            console.log(user);
            AxiosPost('user/updateUser',user).then(sucess=>{
                if(sucess.status==200){
                  this.$notify({title: 'sucess',message: '保存成功',type: 'success'});
                  this.dialogFormVisible=false
                  this.$ls.set("loginUser",user)
                  
                }
            })
        }
    },
};
</script>

<style scoped>
.dialog-footer{
    display: flex;
    justify-content: flex-end;
}
</style>